<template>
	<div class="app-filters">
	
		<el-form :inline="true" class="serach-form-inline">
			
			<el-form-item
				v-for="item in options"
				:key="item.componentsName"
				:label="item.label+'：'">
				 
				<!--名称输入框-->
				<nameInput 
					ref="nameInput"
					v-if="item.componentsName=='nameInput'" 
					:defaultValue="item.defaultValue" 
					@change="handelParamsChange"></nameInput>
					
				<!--主机名称输入框-->
				<hostNameInput 
					ref="hostNameInput"
					v-if="item.componentsName=='hostNameInput'" 
					:defaultValue="item.defaultValue" 
					@change="handelParamsChange"></hostNameInput>
					
					
				<!--主机状态选择-->
				<hostStatusSelect 
					ref="hostStatusSelect"
					v-if="item.componentsName=='hostStatusSelect'" 
					:defaultValue="item.defaultValue" 
					@change="handelParamsChange"></hostStatusSelect>

				<!--字典类型选择-->
				<dictionaryType
					ref="dictionaryType"
					v-if="item.componentsName=='dictionaryType'" 
					:defaultValue="item.defaultValue" 
					@change="handelParamsChange"></dictionaryType>
					
				
        <!--  负载状态选择-->
				<fuzai-status-select 
				    ref="fuzaiStatusSelect"
					v-if="item.componentsName=='fuzaiStatusSelect'" 
					:defaultValue="item.defaultValue" 
					@change="handelParamsChange">
				</fuzai-status-select>

			  <!--应用仓库状态选择  -->
				<yinyong-status-select
				    ref="yinyongStatusSelect"
					v-if="item.componentsName=='yinyongStatusSelect'" 
					:defaultValue="item.defaultValue" 
					@change="handelParamsChange">
				</yinyong-status-select>

				<!-- 实例状态选择 -->
				<shili-status-select
				  ref="shiliStatusSelect"
					v-if="item.componentsName=='shiliStatusSelect'" 
					:defaultValue="item.defaultValue" 
					@change="handelParamsChange">

				</shili-status-select>

				<!-- 规则状态选择 -->
				<guize-status-select 
				    ref="guizeStatusSelect"
					v-if="item.componentsName=='guizeStatusSelect'" 
					:defaultValue="item.defaultValue" 
					@change="handelParamsChange">
					 
				</guize-status-select>
				<!-- 告警规则类型选择 -->
				<gaojinguize-type-select
				 ref="gaojinguizeTypeSelect"
				 v-if="item.componentsName=='gaojinguizeTypeSelect'"
				 :defaultValue="item.defaultValue"
				 @change="handelParamsChange">
				 </gaojinguize-type-select>

				<!-- 告警历史状态选择 -->
				<gaojinlishi-status-select
				    ref="gaojinlishiStatusSelect"
					v-if="item.componentsName=='gaojinlishiStatusSelect'" 
					:defaultValue="item.defaultValue" 
					@change="handelParamsChange">

				</gaojinlishi-status-select>

				<!-- 告警历史类型选择 -->
				<gaojinlishi-type-select
				    ref="gaojinlishiTypeSelect"
					v-if="item.componentsName=='gaojinlishiTypeSelect'" 
					:defaultValue="item.defaultValue" 
					@change="handelParamsChange">
				</gaojinlishi-type-select>
				
				<!-- 告警历史规则输入框 -->
				<ruleNameInput
				    ref="ruleNameInput"
					v-if="item.componentsName=='ruleNameInput'" 
					:defaultValue="item.defaultValue" 
					@change="handelParamsChange"
				 ></ruleNameInput>
				 
				 <!-- 操作日志选择 -->
				 <caozuo-status-select
				    ref="caozuo"
					v-if="item.componentsName=='caozuoStatusSelect'" 
					:defaultValue="item.defaultValue" 
					@change="handelParamsChange">
				 </caozuo-status-select>
				
				 <!-- 开始时间 -->
				 <start-date
				    ref="start"
					:key="item.index"
					v-if="item.componentsName=='startDate'" 
					:defaultValue="item.defaultValue" 
					@change="handelParamsChange">

				 </start-date>
				 <!-- 结束时间 -->
				 <end-date
				    ref="end"
					:key="item.index"
					v-if="item.componentsName=='endDate'" 
					:defaultValue="item.defaultValue" 
					@change="handelParamsChange">
				 </end-date>

				<!-- 应用日志模板搜索下拉 -->
				<search-select
						ref="search"
						:key="item.index"
						v-if="item.componentsName=='searchSelect'" 
						:defaultValue="item.defaultValue" 
						:tmpurl="item.tmpurl"
						:insturl="item.insturl"
						@change="handelParamsChange">
						</search-select>
				 	<!--联系人姓名输入框-->
				<lxrNameInput 
					ref="lxrNameInput"
					v-if="item.componentsName=='lxrNameInput'" 
					:defaultValue="item.defaultValue" 
					@change="handelParamsChange"></lxrNameInput>
        
				<!-- 集群选择 -->
				<jiqun-select
					   ref="search"
						:key="item.index"
						v-if="item.componentsName=='jiqunSelect'" 
						:defaultValue="item.defaultValue" 
						:tmpurl="item.tmpurl"
						:insturl="item.insturl"
						@change="handelParamsChange">
				</jiqun-select>
				
				<!-- 部署类型 -->
				<bushuTypeSelect
					  ref="bushuTypeSelect"
					  v-if="item.componentsName=='bushuTypeSelect'" 
					  :defaultValue="item.defaultValue"
						@change="handelParamsChange">
				</bushuTypeSelect>
				
				<!-- 模板选择 -->
				<mobanActiveSelect
					  ref="mobanActiveSelect"
					  v-if="item.componentsName=='mobanActiveSelect'" 
					  :defaultValue="item.defaultValue"
						@change="handelParamsChange">
				</mobanActiveSelect>
				
				<!-- 编排模板选择 -->
				<bianpaiMobanSelect
					  ref="bianpaiMobanSelect"
					  v-if="item.componentsName=='bianpaiMobanSelect'" 
					  :defaultValue="item.defaultValue"
						@change="handelParamsChange">
				</bianpaiMobanSelect>
				
				
			</el-form-item>
			
             
      <el-form-item >
        <el-button type="primary"
                   size="small"
                   @click="handleSearch">
          	<i class="iconfont icon-search"></i>查询
        </el-button>
        <el-button class="reset" type="primary"
                   size="small"
                   @click="handleReset">
          	<i class="iconfont icon-23refresh"></i>重置
        </el-button>
      </el-form-item>
      
    </el-form>
		
	</div>
</template>

<script>
import nameInput from "@/view/components/input/nameInput";
import hostNameInput from "@/view/components/input/hostNameInput";
import hostStatusSelect from "@/view/components/select/hostStatusSelect";
import dictionaryType from "@/view/components/select/dictionaryType";
import yinyongStatusSelect from "@/view/components/select/yinyongStatusSelect";
import shiliStatusSelect from "@/view/components/select/shiliStatusSelect";
import fuzaiStatusSelect from '@/view/components/select/fuzaiStatusSelect';
import guizeStatusSelect from '@/view/components/select/guizeStatusSelect';
import gaojinlishiStatusSelect from '@/view/components/select/gaojinlishiStatusSelect';
import gaojinlishiTypeSelect from '@/view/components/select/gaojinlishiTypeSelect';
import caozuoStatusSelect from '@/view/components/select/caozuoStatusSelect';
import ruleNameInput from "@/view/components/input/ruleNameInput";
import startDate from '@/view/components/date/startDate';
import endDate from '@/view/components/date/endDate';
import searchSelect from '@/view/components/select/searchSelect';
import gaojinguizeTypeSelect from '@/view/components/select/gaojinguizeTypeSelect';
import lxrNameInput from '@/view/components/input/lxrNameInput'
import jiqunSelect from '@/view/components/select/jiqunSelect';
import bushuTypeSelect from '@/view/components/select/bushuTypeSelect';
import mobanActiveSelect from '@/view/components/select/mobanActiveSelect';
import bianpaiMobanSelect from '@/view/components/select/bianpaiMobanSelect';


export default {
	name: "filters",
	props: [
		"options"
	],
	components: {
		nameInput,
		hostNameInput,
		hostStatusSelect,
		dictionaryType,
		yinyongStatusSelect,
		shiliStatusSelect,
		fuzaiStatusSelect,
		guizeStatusSelect,
		gaojinlishiStatusSelect,
		gaojinlishiTypeSelect,
		caozuoStatusSelect,
		ruleNameInput,
		startDate,
		endDate,
		searchSelect,
		gaojinguizeTypeSelect,
		lxrNameInput,
		jiqunSelect,
		bushuTypeSelect,
		mobanActiveSelect,
		bianpaiMobanSelect,
	},
	data() {
		return {
			filterParams: {},
			changeTimes: 0,
			
			changeTime : new Date().getTime() ,
		}
	},
	mounted() {
		if (!this.options) {
			return;
		}
		this.options.forEach(el => {
			console.log(el.paramsName,el.defaultValue)
			this.filterParams[el.paramsName] = el.defaultValue;
		})
		this.handleSearch()
	},
	methods: {
		handleSearch() {
			this.changeTimes++;
			setTimeout(() => {
				this.changeTimes--;
				if (!this.changeTimes) {
					this.$emit("change", this.filterParams);
				}
			},200)
		},
		handleReset() {
			// 重置各项
			for (let i in this.$refs) {
				if (this.$refs[i] && this.$refs[i][0] && this.$refs[i][0].reset) {
					this.$refs[i][0].reset();
				}
			}
		},
		handelParamsChange(componentsName, v) {
			this.options.forEach(el => {
				if (el.componentsName == componentsName) {
					this.filterParams[el.paramsName] = v;
				}
			})
			this.handleSearch()
		},
	}
}
</script>

<style scoped lang="scss">
@import "../../styles/variables.scss";

.app-filters {
  padding: 30px 20px 10px;
  border-bottom: 1px solid $borderGrey;

  .el-form {
    .el-button.reset {
      background: #81ace3;
      border-color: #81ace3;

      &:hover,
      &focus {
        background: #5187ce;
        border-color: #5187ce;
      }
    }
  }
}
</style>